import { onMounted, onUnmounted, ref } from 'vue';

/**
 * 点击外部关闭的组合式函数
 * @param {Function} callback - 点击外部时执行的回调（如关闭组件）
 * @returns {Object} - { targetRef: 绑定组件的 ref, isShow: 控制显示的状态 }
 */
export const useClickOutside = callback => {
  const targetRef = ref(null); // 绑定组件根元素

  // 全局点击处理
  const handleClick = e => {
    // 点击目标不在组件内 → 执行回调（关闭逻辑）
    if (!targetRef.value?.contains(e.target)) {
      callback?.();
    }
  };

  // 监听与销毁
  onMounted(() => {
    setTimeout(() => {
      document.addEventListener('click', handleClick);
    }, 0);
  });

  onUnmounted(() => {
    document.removeEventListener('click', handleClick);
  });

  return { targetRef };
};
